<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>张先生 & 李小姐 | 婚礼请柬</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
        }
        
        :root {
            --primary: #e8c5a0;
            --secondary: #f9e7d4;
            --accent: #d4a798;
            --text: #5d4037;
            --light: #fff9f0;
            --gold: #d4af37;
        }
        
        body {
            background: linear-gradient(135deg, #fff9f0 0%, #f9e7d4 100%);
            color: var(--text);
            line-height: 1.6;
            overflow-x: hidden;
            position: relative;
        }
        
        body::before {
            content: "";
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100" height="100" viewBox="0 0 100 100"><path d="M20,20 Q40,5 60,20 T100,20 Q85,40 100,60 T100,100 Q60,85 60,100 T20,100 Q5,85 20,60 T20,20" fill="none" stroke="%23e8c5a080" stroke-width="0.5"/></svg>');
            opacity: 0.2;
            z-index: -1;
        }
        
        .container {
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            position: relative;
        }
        
        /* 头部样式 */
        header {
            text-align: center;
            padding: 40px 0;
            position: relative;
            overflow: hidden;
        }
        
        .header-content {
            position: relative;
            z-index: 2;
        }
        
        .couple-names {
            font-size: 3.5rem;
            margin: 20px 0;
            color: var(--text);
            letter-spacing: 3px;
            font-weight: 300;
            text-shadow: 1px 1px 2px rgba(0,0,0,0.1);
        }
        
        .ampersand {
            font-size: 2.5rem;
            color: var(--gold);
            margin: 0 15px;
            vertical-align: middle;
        }
        
        .wedding-title {
            font-size: 1.2rem;
            letter-spacing: 8px;
            text-transform: uppercase;
            color: var(--accent);
            margin-bottom: 30px;
            font-weight: 300;
        }
        
        .date-badge {
            background: var(--gold);
            color: white;
            display: inline-block;
            padding: 12px 30px;
            border-radius: 30px;
            font-size: 1.2rem;
            letter-spacing: 2px;
            margin: 20px 0;
            box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        }
        
        /* 邀请函卡片 */
        .invitation-card {
            background: white;
            border-radius: 20px;
            padding: 40px;
            margin: 40px 0;
            box-shadow: 0 10px 30px rgba(0,0,0,0.08);
            position: relative;
            overflow: hidden;
            border: 1px solid rgba(232, 197, 160, 0.3);
        }
        
        .invitation-card::before {
            content: "";
            position: absolute;
            top: -10px;
            left: -10px;
            right: -10px;
            bottom: -10px;
            border: 2px solid var(--primary);
            border-radius: 25px;
            z-index: -1;
            opacity: 0.2;
        }
        
        .card-title {
            text-align: center;
            font-size: 2rem;
            margin-bottom: 30px;
            color: var(--text);
            position: relative;
            padding-bottom: 15px;
        }
        
        .card-title::after {
            content: "";
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translateX(-50%);
            width: 80px;
            height: 2px;
            background: var(--gold);
        }
        
        .event-details {
            margin: 25px 0;
        }
        
        .detail-item {
            display: flex;
            margin-bottom: 20px;
            align-items: flex-start;
        }
        
        .detail-icon {
            width: 50px;
            height: 50px;
            background: var(--secondary);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px;
            flex-shrink: 0;
            color: var(--gold);
            font-size: 1.2rem;
        }
        
        .detail-content h3 {
            font-size: 1.3rem;
            margin-bottom: 5px;
            color: var(--text);
        }
        
        .detail-content p {
            color: var(--accent);
        }
        
        /* 地图部分 */
        .map-container {
            height: 300px;
            background: #f5f2eb;
            border-radius: 15px;
            overflow: hidden;
            margin: 30px 0;
            position: relative;
            box-shadow: inset 0 0 10px rgba(0,0,0,0.05);
        }
        
        .map-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(to bottom, rgba(232, 197, 160, 0.1) 0%, rgba(249, 231, 212, 0.3) 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            color: var(--text);
            font-size: 1.2rem;
            font-weight: 500;
            text-align: center;
            padding: 20px;
        }
        
        .map-overlay i {
            display: block;
            font-size: 3rem;
            margin-bottom: 15px;
            color: var(--gold);
        }
        
        /* 留言部分 */
        .wishes-section {
            margin: 50px 0;
        }
        
        .wish-form {
            display: flex;
            margin: 20px 0;
        }
        
        .wish-input {
            flex: 1;
            padding: 15px;
            border: 1px solid var(--primary);
            border-radius: 10px 0 0 10px;
            font-size: 1rem;
            outline: none;
            background: var(--light);
        }
        
        .wish-button {
            background: var(--gold);
            color: white;
            border: none;
            padding: 0 25px;
            border-radius: 0 10px 10px 0;
            font-size: 1rem;
            cursor: pointer;
            transition: all 0.3s ease;
        }
        
        .wish-button:hover {
            background: #c19b2e;
        }
        
        .wishes-container {
            margin-top: 30px;
        }
        
        .wish-item {
            background: white;
            border-radius: 12px;
            padding: 15px;
            margin-bottom: 15px;
            box-shadow: 0 3px 10px rgba(0,0,0,0.05);
            border-left: 3px solid var(--gold);
        }
        
        .wish-author {
            font-weight: bold;
            margin-bottom: 5px;
            color: var(--text);
        }
        
        .wish-text {
            color: #777;
        }
        
        /* 底部按钮 */
        .action-buttons {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 15px;
            margin: 40px 0;
        }
        
        .action-button {
            background: white;
            border: 2px solid var(--primary);
            border-radius: 12px;
            padding: 18px;
            text-align: center;
            font-size: 1.1rem;
            color: var(--text);
            cursor: pointer;
            transition: all 0.3s ease;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
        }
        
        .action-button i {
            font-size: 2.5rem;
            margin-bottom: 10px;
            color: var(--gold);
        }
        
        .action-button:hover {
            background: var(--secondary);
            transform: translateY(-3px);
            box-shadow: 0 5px 15px rgba(0,0,0,0.1);
        }
        
        /* 页脚 */
        footer {
            text-align: center;
            padding: 30px 0;
            color: var(--accent);
            font-size: 0.9rem;
            border-top: 1px solid rgba(232, 197, 160, 0.3);
            margin-top: 20px;
        }
        
        .floral-divider {
            position: relative;
            height: 40px;
            margin: 40px 0;
            text-align: center;
        }
        
        .floral-divider::before, 
        .floral-divider::after {
            content: "❦";
            position: absolute;
            top: 0;
            color: var(--gold);
            font-size: 1.8rem;
        }
        
        .floral-divider::before {
            left: 30%;
        }
        
        .floral-divider::after {
            right: 30%;
        }
        
        /* 动画效果 */
        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }
        
        .animate {
            animation: fadeIn 0.8s ease forwards;
        }
        
        .delay-1 { animation-delay: 0.2s; }
        .delay-2 { animation-delay: 0.4s; }
        .delay-3 { animation-delay: 0.6s; }
        .delay-4 { animation-delay: 0.8s; }
        
        /* 响应式调整 */
        @media (max-width: 768px) {
            .couple-names {
                font-size: 2.5rem;
            }
            
            .action-buttons {
                grid-template-columns: 1fr;
            }
            
            .invitation-card {
                padding: 25px;
            }
            
            .detail-item {
                flex-direction: column;
                align-items: center;
                text-align: center;
            }
            
            .detail-icon {
                margin-right: 0;
                margin-bottom: 10px;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <header>
            <div class="header-content">
                <h1 class="wedding-title animate">婚礼邀请函</h1>
                <div class="couple-names animate delay-1">
                    张先生 <span class="ampersand">&</span> 李小姐
                </div>
                <div class="date-badge animate delay-2">
                    2025年10月5日
                </div>
            </div>
        </header>
        
        <div class="invitation-card animate delay-3">
            <h2 class="card-title">诚挚邀请</h2>
            <p style="text-align: center; margin-bottom: 30px; line-height: 1.8;">
                亲爱的朋友，我们诚挚地邀请您参加我们的婚礼，<br>
                与我们共同分享这份喜悦与幸福。
            </p>
            
            <div class="floral-divider"></div>
            
            <div class="event-details">
                <div class="detail-item animate delay-1">
                    <div class="detail-icon">
                        <i class="fas fa-calendar-alt"></i>
                    </div>
                    <div class="detail-content">
                        <h3>婚礼日期</h3>
                        <p>2025年10月5日（星期六）</p>
                        <p>下午3:00 仪式开始</p>
                    </div>
                </div>
                
                <div class="detail-item animate delay-2">
                    <div class="detail-icon">
                        <i class="fas fa-church"></i>
                    </div>
                    <div class="detail-content">
                        <h3>婚礼仪式</h3>
                        <p>圣心大教堂</p>
                        <p>幸福路520号</p>
                    </div>
                </div>
                
                <div class="detail-item animate delay-3">
                    <div class="detail-icon">
                        <i class="fas fa-utensils"></i>
                    </div>
                    <div class="detail-content">
                        <h3>婚宴地点</h3>
                        <p>幸福大酒店宴会厅</p>
                        <p>下午6:00 晚宴开始</p>
                    </div>
                </div>
            </div>
        </div>
        
        <div class="map-container animate delay-4">
            <div class="map-overlay">
                <div>
                    <i class="fas fa-map-marked-alt"></i>
                    <p>点击查看婚礼地点导航</p>
                    <p>圣心大教堂 · 幸福路520号</p>
                </div>
            </div>
        </div>
        
        <div class="wishes-section">
            <h2 class="card-title">祝福留言</h2>
            <div class="wish-form">
                <input type="text" class="wish-input" placeholder="写下您的祝福...">
                <button class="wish-button">发送</button>
            </div>
            
            <div class="wishes-container">
                <div class="wish-item">
                    <div class="wish-author">王女士</div>
                    <div class="wish-text">恭喜你们！愿你们白头偕老，永浴爱河！</div>
                </div>
                <div class="wish-item">
                    <div class="wish-author">李先生</div>
                    <div class="wish-text">祝新婚快乐，幸福美满！期待参加你们的婚礼！</div>
                </div>
            </div>
        </div>
        
        <div class="action-buttons">
            <div class="action-button animate delay-1">
                <i class="fas fa-check-circle"></i>
                <span>确认出席</span>
            </div>
            <div class="action-button animate delay-2">
                <i class="fas fa-gift"></i>
                <span>礼物清单</span>
            </div>
            <div class="action-button animate delay-3">
                <i class="fas fa-images"></i>
                <span>婚礼相册</span>
            </div>
            <div class="action-button animate delay-4">
                <i class="fas fa-music"></i>
                <span>婚礼音乐</span>
            </div>
        </div>
        
        <footer>
            <p>期待与您共同见证我们的幸福时刻</p>
            <p>张先生 & 李小姐 敬邀</p>
            <p style="margin-top: 15px;">联系电话: 13800138000</p>
        </footer>
    </div>
    
    <script>
        // 添加简单的交互效果
        document.addEventListener('DOMContentLoaded', function() {
            // 为所有按钮添加点击效果
            const buttons = document.querySelectorAll('.action-button, .wish-button');
            buttons.forEach(button => {
                button.addEventListener('click', function() {
                    this.style.transform = 'scale(0.95)';
                    setTimeout(() => {
                        this.style.transform = '';
                    }, 200);
                    
                    // 根据不同按钮显示不同提示
                    if(this.classList.contains('wish-button')) {
                        const input = document.querySelector('.wish-input');
                        if(input.value.trim() !== '') {
                            alert('感谢您的祝福！');
                            input.value = '';
                        }
                    } else {
                        const text = this.querySelector('span').textContent;
                        alert(`您点击了: ${text} 功能`);
                    }
                });
            });
            
            // 地图点击效果
            const map = document.querySelector('.map-container');
            map.addEventListener('click', function() {
                alert('即将打开地图导航');
            });
            
            // 添加滚动动画
            const observer = new IntersectionObserver((entries) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        entry.target.classList.add('animate');
                    }
                });
            }, { threshold: 0.1 });
            
            document.querySelectorAll('.detail-item, .wish-item').forEach(item => {
                observer.observe(item);
            });
        });
    </script>
</body>
</html>